<template>
  <view class="container">
    <view class="header">
      <text class="title">报销单列表</text>
    </view>
    
    <view class="list-container">
      <view v-if="baoxiaoList.length === 0" class="empty-tip">
        <text>暂无报销单数据</text>
      </view>
      
      <view v-else class="baoxiao-item" v-for="item in baoxiaoList" :key="item.hr_expense_id" @click="gotoMessage(item.hr_expense_id)">
        <view class="item-header">
          <text class="item-date">{{ item.date }}</text>
          <text class="item-status" :class="{'paid': item.state === '已支付'}">{{ item.state }}</text>
        </view>
        
        <view class="item-content">
          <text class="item-title">{{ item.name }}</text>
          
          <view class="item-details">
            <text class="detail-label">报销人:</text>
            <text class="detail-value">{{ item.employee }}</text>
          </view>
          
          <view class="item-details">
            <text class="detail-label">公司:</text>
            <text class="detail-value">{{ item.company }}</text>
          </view>
          
          <view class="item-details">
            <text class="detail-label">支付方式:</text>
            <text class="detail-value">{{ item.payment_mode }}</text>
          </view>
        </view>
        
        <view class="item-footer">
          <text class="amount-label">报销金额:</text>
          <text class="amount-value">¥{{ item.total_amount }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {onLoad} from '@dcloudio/uni-app'
  import {ref} from 'vue'
  import {getBaoxiaoDanList} from '@/api/baoxiao.js'
  
  const baoxiaoList = ref([])
  
  const gotoMessage = (id) => {
	  uni.navigateTo({
	  	url:`/model/baoXiao/baoxiaoMessage?id=${id}`
	  })
  }
  
  const _getBaoxiaoDanList = () => {
    getBaoxiaoDanList().then((res)=>{
      console.log('报销单列表',res);
      
      if (res.hr_expense_list && res.hr_expense_list.length > 0) {
        baoxiaoList.value = res.hr_expense_list
      } else {
        uni.showToast({
          title:'没有报销单',
          icon: 'none'
        })
      }
    }).catch(err => {
      uni.showToast({
        title: '获取报销单失败',
        icon: 'error'
      })
    })
  }
  
  onLoad(()=>{
    _getBaoxiaoDanList()
  })
</script>

<style lang="scss" scoped>
  .container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
  }
  
  .header {
    padding: 20rpx 0;
    margin-bottom: 20rpx;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .list-container {
    .empty-tip {
      text-align: center;
      padding: 40rpx;
      color: #999;
      font-size: 28rpx;
    }
  }
  
  .baoxiao-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .item-date {
        font-size: 26rpx;
        color: #666;
      }
      
      .item-status {
        font-size: 26rpx;
        padding: 6rpx 12rpx;
        border-radius: 20rpx;
        background-color: #f0f0f0;
        color: #666;
        
        &.paid {
          background-color: #e8f5e9;
          color: #2e7d32;
        }
      }
    }
    
    .item-content {
      margin-bottom: 20rpx;
      
      .item-title {
        font-size: 30rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .item-details {
        display: flex;
        margin-bottom: 8rpx;
        font-size: 26rpx;
        
        .detail-label {
          color: #999;
          margin-right: 10rpx;
        }
        
        .detail-value {
          color: #666;
        }
      }
    }
    
    .item-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 16rpx;
      border-top: 1rpx solid #eee;
      
      .amount-label {
        font-size: 26rpx;
        color: #999;
      }
      
      .amount-value {
        font-size: 32rpx;
        color: #ff6b00;
        font-weight: bold;
      }
    }
  }
</style>